<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">

<style>
/* Demo Syles */
.swiper-container {
	width: 880px;
	height: 400px;
}

.swiper-slide {
	/* 	color: #fff; */
	font-size: 16px;
	text-align: left;
	font-weight: bold;
	font-style: italic;
	/* 	line-height: 200px; */
}

.swiper-scrollbar {
	height: 10px;
	margin: 20px auto;
	width: 880px;
}

</style>
</head>
<body>
	<div data-role="page" id="catalaguepage" style="background: white;">
		<div data-role="header">
			<div align="center">
				<img src="img/zepterlogo.png" alt="Smiley face" height="69" width="172">
			</div>
			<a href="p1.html" data-icon="back">back</a>
		</div>
		<div data-role="content">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<div>
							<img src="product-images/gold.jpg" align="left">
						</div>
						<div style="width: 300px; float: left; margin-left: 5px; margin-top: 25px;">
							<p>Gold Black dial Code:MCS-G-B Chronograph Valjoux 7750 self-winding movement. Half-moon dial. Sapphire crystal. Louisiana crocodile leather
								bracelet. Waterproof to 3atm</p>
						</div>

					</div>

					<div class="swiper-slide">
						<div>
							<img src="product-images/white-dial.jpg" align="left">
						</div>
						<div style="width: 300px; float: left; margin-left: 5px; margin-top: 25px;">
							<p>Gold White dial Code: MCS-G-W Chronograph Valjoux 7750 self-winding movement. Half-moon dial. Case available in gold 18ct. Sapphire crystal.
								Louisiana crocodile leather bracelet. Waterproof to 3atm.</p>

						</div>
					</div>
					<div class="swiper-slide">

						<div>
							<img src="product-images/lapis-blue.jpg">
						</div>
					</div>
					<div class="swiper-slide">
						<div>
							<img src="product-images/velvet-blue.jpg">
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-scrollbar"></div>

		</div>
		<div data-role="footer">
			<h4>© Copyright 2009 Zepter International</h4>
		</div>
	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

	<script src="js/idangerous.swiper-2.1.min.js"></script>
	<script src="js/idangerous.swiper.scrollbar-2.1.js"></script>
	<script>
  var mySwiper = new Swiper('.swiper-container',{
    //Enable Scrollbar
    scrollbar: {
      container :'.swiper-scrollbar',
      hide: false,
      draggable: false  
    }
  })
  </script>
</body>
</html>